import React, {Component} from 'react';
import {PageContainer} from '@ant-design/pro-layout';
import {Button, Form, Input, Select, Tooltip,Radio } from "antd";
import {flowRight} from "lodash";

const {Option} = Select;

const { TextArea } = Input;

const text = <span style={{color: "black"}}>prompt text</span>;

const layout = {
  labelCol: {span: 3},
  wrapperCol: {span: 9},
};


const LnavlidKeyword = () => {
  const [form] = Form.useForm();
  const onFinish = (values: any) => {
    console.log(values);
  };

  const [value, setValue] = React.useState(1);

  const onChange = e => {
    console.log('radio checked', e.target.value);
    setValue(e.target.value);
  };

  return (
    <PageContainer
      header={{
        title: '微信菜单',
        breadcrumb: {},
      }}
    >
      <div style={{background: "white", width: '100%'}}>
        <div style={{paddingTop: 20, paddingLeft: 100, paddingBottom: 20}}>
          <img style={{width: 320}} src="https://pro.crmeb.net/admin/view_admin/img/mobilehead.1c931282.png" alt=""/>
          <div style={{width: 320, height: 440, background: '#f4f5f9', position: "relative"}}>
            <div style={{width: 320, height: 30, textAlign: "center", paddingTop: 20}}>
              <div style={{
                border: "1px solid #aaabae",
                borderRadius: 5,
                background: "#aaabae",
                width: 45,
                margin: "auto",
                color: "white"
              }}>9:30
              </div>
            </div>
            <div style={{width: 320, paddingTop: 20, marginLeft: 15}}>
              <Tooltip placement="right" zIndex={1} title={text} defaultVisible={true} color="#ffffff" trigger="focus">
                <img style={{width: 40}} src="https://pro.crmeb.net/admin/view_admin/img/head.cfd4b538.gif" alt=""/>
              </Tooltip>
            </div>
          </div>
          <div style={{height: 50, width: 320, display: "flex"}}>
            <img src="https://i.loli.net/2021/09/09/Vzif5ldUYkOEIuT.png" alt=""/>

          </div>
        </div>


        <div>
          <Form {...layout} form={form} name="control-hooks" onFinish={onFinish}>
            <Form.Item name="note" label="菜单名称">
              <Radio.Group defaultValue={1} onChange={onChange} value={value}>
                <Radio value={1}>启用</Radio>
                <Radio value={2}>禁用</Radio>
              </Radio.Group>
            </Form.Item>
            <Form.Item name="gender" label="消息类型" rules={[{required: true}]}>
              <Select
                // placeholder="Select a option and change input text above"
                // onChange={onGenderChange}
                // allowClear
                defaultValue="male"
              >
                <Option value="male">文字消息</Option>
                <Option value="female">图片消息</Option>
                <Option value="other">图文消息</Option>
                <Option value="lister">声音消息</Option>
              </Select>
            </Form.Item>
            <Form.Item name="keyword" label="消息内容" rules={[{required: true}]}>
              <TextArea rows={4} />
            </Form.Item>
          </Form>
        </div>

        <div style={{width: '100%', textAlign: "center"}}>
          <Button style={{marginTop: 50, marginBottom: 20}} type="primary">保存并发布</Button>
        </div>
      </div>


    </PageContainer>
  );
}

export default LnavlidKeyword;

// <a href="https://sm.ms/image/NXLjv957ESq6Ofa" target="_blank"><img src="" ></a>
